{% extends "base.html" %}
{% block page_title %}Details{% endblock %}
{% load project_extras %}
{% load static %}

{% block content %}
<div class="card full">
  <div class="cardface">
    <div class="row">
      <div class="col-md-12">
        <h2>{{ project.name }}</h2>
        <p>Created By: {{ project.creator }}</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title">
              <a data-toggle="collapse" href="#description-panel" class="accordion-toggle">
                Description
              </a>
            </h5>
          </div>
          <div id="description-panel" class="panel-collapse collapse in">
            <div class="panel-body">
              {% if project.description %}
              <p>{{ project.description }}</p>
              {% else %}
              <h5><strong>No Description Available</strong></h5>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-8">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title">
              <a data-toggle="collapse" href="#admin-panel" class="accordion-toggle">
                Permissions
              </a>
            </h5>
          </div>
          <div id="admin-panel" class="panel-collapse collapse in">
            <div class="panel-body">
              <div class="row">
                <div class="col-md-6">
                    <h4>Admin(s)</h4>
                    <ul class="list-group-flush">
                    <li class="list-group-item">{{ project.creator }}</li>
                    {% for perm in project.projectpermissions_set.all %}
                      {% if perm.permission == 'ADMIN' %}
                        <li class="list-group-item">{{ perm.profile }}</li>
                      {% endif %}
                    {% endfor %}
                    </ul>
                  </div>
                <div class="col-md-6">
                  <h4>Coder(s)</h4>
                  <ul class="list-group-flush">
                  {% if project.coder_count > 0 %}
                    {% for perm in project.projectpermissions_set.all %}
                      {% if perm.permission == 'CODER' %}
                      <li class="list-group-item">{{ perm.profile }}</li>
                      {% endif %}
                    {% endfor %}
                  {% else %}
                  <h5><strong>No CODER Permissions Available</strong></h5>
                  {% endif %}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title">
              <a data-toggle="collapse" href="#settings-panel" class="accordion-toggle">
                Advanced Project Settings
              </a>
            </h5>
          </div>
          <div id="settings-panel" class="panel-collapse collapse in">
            <div class="panel-body">
              <ul class="list-group-flush">
                {% if project.classifier != None %}
                <li class="list-group-item">
                  <dt>Classifier</dt>
                  <dd>{{ project.classifier }}</dd>
                </li>
                {% else %}
                <li class="list-group-item">
                  <dt>No Classifier being used</dt>
                </li>
                {% endif %}
                <li class="list-group-item">
                  <dt>Selection Algorithm</dt>
                  <dd>{{ project.learning_method }}</dd>
                </li>
                <li class="list-group-item">
                  <dt>Batch Size</dt>
                  <dd>{{ project.batch_size }}</dd>
                </li>
                {% if project.percentage_irr == 0.0 %}
                <li class="list-group-item">
                  <dt>No IRR being used</dt>
                </li>
                {% else %}
                <li class="list-group-item">
                  <dt>Percent IRR</dt>
                  <dd>{{ project.percentage_irr }}%</dd>
                </li>
                <li class="list-group-item">
                  <dt>Number of users for IRR</dt>
                  <dd>{{ project.num_users_irr }}</dd>
                </li>
                {% endif %}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title">
              <a data-toggle="collapse" href="#label-panel" class="accordion-toggle collapsed">
                Labels
              </a>
            </h5>
          </div>
          <div id="label-panel" class="panel-collapse collapse">
            <div class="panel-body">
              <ul class="list-group-flush">
                {% for label in project.labels.all %}
                  <li class="list-group-item">
                    <dt>{{ label.name }}</dt>
                    <dd>{{ label.description }}</dd>
                  </li>
                {% endfor %}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title">
              <a data-toggle="collapse" href="#Data-panel" class="accordion-toggle collapsed">
                Data
              </a>
            </h5>
          </div>
          <div id="Data-panel" class="panel-collapse collapse">
            <div class="panel-body">
              <ul class="list-group-flush">
              {% for data in project.data_set.all|slice:"5" %}
                <li class="list-group-item showData">{{ data.text }}</li>
              {% endfor %}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="btn-group" role="group" aria-label="Project Controls">
          <a class="btn btn-primary" href="{% url 'projects:project_list' %}" role="button">
            Return to Projects
          </a>
          {% if project|proj_permission_level:request.user.profile > 1 %}
          <a class="btn btn-info" href="{% url 'projects:project_update_landing' project.pk %}" role="button">
            Update Project
          </a>
          <a class="btn btn-danger" href="{% url 'projects:project_delete' project.pk %}" role="button">
            Delete Project
          </a>
          {% endif %}
        </div>

        <div class="btn-group pull-right" role="group" aria-label="Admin Controls">
          {% if project.codebook_file != "" %}
          <a class="btn btn-primary" href = "{% static project.codebook_file %}" target = "_blank" id="download_cb_btn">View CodeBook</a>
          {% endif %}
          {% if project|proj_permission_level:request.user.profile > 1 %}
            <a class="btn btn-primary" href="{% url 'projects:project_admin' project.pk %}" role="button">
              Admin Page
            </a>
          {% if project.has_model %}
            <a class="btn btn-primary" id="download_model_btn">Download Model and Labeled Data</a>
          {% else %}
            {% if project.labeled_data_count > 0 %}
            <a class="btn btn-primary" id="download_btn">Download Labeled Data</a>
            {% else %}
            <a class="btn btn-primary disabled" id="download_btn">No Labeled Data to Download</a>
            {% endif %}
          {% endif %}
          {% endif %}
        </div>
      </div>
    </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts_body %}
<script>
/*
 *  When the download model button is pressed, download a zip file
 *  with a README, the model, labeled data, and tfidf matrix
 */
$('#download_model_btn').on('click', function() {
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    var a, today;
    if (xhttp.readyState === 4 && xhttp.status === 200) {
      a = document.createElement('a');
      a.href = window.URL.createObjectURL(xhttp.response);
      today = new Date();
      a.download = 'project_' + {{ project.pk }} + '_model_' + today.toDateString().split(' ').join('_') + '.zip';
      a.style.display = 'none';
      document.body.appendChild(a);
      return a.click();
    }
  };
  xhttp.open('GET', '/api/download_model/' + {{ project.pk }} + '/', true);
  xhttp.setRequestHeader('Content-Type', 'application/json');
  xhttp.responseType = 'blob';
  xhttp.send();
});

/*
 *  When download button is pressed request the csv file, add the data as a blob
 *  to a new anchor element, and trigger a click event on that anchor element
 *  to prompt the download file popup
 */
$('#download_btn').on('click', function() {
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    var a, today;
    if (xhttp.readyState === 4 && xhttp.status === 200) {
      a = document.createElement('a');
      a.href = window.URL.createObjectURL(xhttp.response);
      today = new Date();
      a.download = 'project_' + {{ project.pk }} + '_labels_' + today.toDateString().split(' ').join('_') + '.csv';
      a.style.display = 'none';
      document.body.appendChild(a);
      return a.click();
    }
  };
  xhttp.open('GET', '/api/download_data/' + {{ project.pk }} + '/', true);
  xhttp.setRequestHeader('Content-Type', 'application/json');
  xhttp.responseType = 'blob';
  xhttp.send();
});
</script>
{% endblock %}
